<div
  class="text-base prose prose-purple md:prose-orange dark:prose-invert max-w-full text-left mt-10 p-3 md:p-5 shadow-lg border rounded"
>
  <h1>Svelte Scoped Uno with SvelteKit</h1>

  <p>This project has the following <b>example usages</b>:</p>

  <ul>
    <li>dark mode</li>
    <li><code>.logo</code> shortcut</li>
    <li>preflights</li>
    <li>safelist</li>
    <li>styles reset</li>
    <li>parent dependent classes</li>
    <li>children affecting classes</li>
    <li>nested component styles (passed down through class prop)</li>
    <li>Conditional <code>class:</code> syntax, including shorthand</li>
    <li>--at-apply</li>
    <li>
      This <code>.prose</code> block is from <code>presetTypography()</code>. Place the <code>prose</code>
      class into your safelist to make it work (as that class must be in the
      global stylesheet). Color classes like <code>prose-purple</code> are fine to use as
      you would any other utility class. You can put it in the safelist to have
      it in the global styles or leave it alone to have it be added just to the
      component(s) where used.
    </li>
  </ul>
</div>
